@page "/treemap/print"

@using Syncfusion.Blazor.TreeMap
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the top 10 best-selling smartphone brands. Print and export options have been enabled in this sample.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to export and print the rendered treemap. The treemap component can be exported to JPEG, PNG, SVG, and PDF formats. Print functionality is done by <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/treemap/methods/?no-cache=1#print'>Print</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ITreeMap.html#Syncfusion_Blazor_TreeMap_ITreeMap_AllowPrint'>AllowPrint</a></code> is set as true. Export functionality is done by <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/treemap/methods/?no-cache=1#export'>Export</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ITreeMap.html#Syncfusion_Blazor_TreeMap_ITreeMap_AllowImageExport'>AllowImageExport</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ITreeMap.html#Syncfusion_Blazor_TreeMap_ITreeMap_AllowPdfExport'>AllowPdfExport</a></code> is set as true. Tooltip is enabled in this example.</p>
   <p>More information about print and export can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/print-and-export'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfTreeMap @ref="@TreemapRef" WeightValuePath="Percentage" RangeColorValuePath="Percentage" DataSource="@LeafDatasource"
                LayoutType="LayoutMode.SliceAndDiceVertical" AllowPdfExport="true" AllowPrint="true" AllowImageExport="true">
        <TreeMapTitleSettings Text="Top 10 best selling smartphone brands - 2017"/>
        <TreeMapTooltipSettings Visible="true" Format="${Product} (+${Percentage}) %"/>
        <TreeMapLeafItemSettings LabelPath="Product" Fill="#6699cc" LabelFormat="${Product} (+${Percentage}) %" LabelPosition="@Syncfusion.Blazor.TreeMap.LabelPosition.Center">
            <TreeMapLeafColorMappings>
                <TreeMapLeafColorMapping StartRange="1.3" EndRange="22" Color="@LeafColor" MinOpacity="0.5" MaxOpacity="1"/>
            </TreeMapLeafColorMappings>
            <TreeMapLeafBorder Color="#000000" Width="0.5"/>
        </TreeMapLeafItemSettings>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href="http://zeenews.india.com/photos/business/worlds-10-best-selling-smartphone-brands-2033958/samsung-2033959" target="_blank">zeenews.india.com</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
    <table style="width: 120%">
        <tbody>
            <tr>
                <td>
                    <div class="property-text">Export Type</div>
                </td>
                <td>
                    <div style="width:60%;margin-left: 10px">
                        <SfDropDownList TValue="string" TItem="FileTypeList" DataSource="@FileTypes" Value="@FileType">
                            <DropDownListEvents TItem="FileTypeList" TValue="string" ValueChange="TreemapValueChange"/>
                            <DropDownListFieldSettings Text="Name" Value="Name"/>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="property-text">File Name</div>
                </td>
                <td>
                    <div style="width:90px;margin-left:10px">
                        <SfTextBox Value="@FileName" ValueChange="@NameChange" Placeholder="Enter the file name"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="padding-left: 7%;">
                        <SfButton Content="Export" OnClick="ExportClick" CssClass="e-info" IsToggle="true" IsPrimary="true"/>
                </td>
                <td>
                    <SfButton @onclick="PrintButton" Content="Print" IsPrimary="true" CssClass="e-info"/>
                </td>
            </tr>
        </tbody>
    </table>

</div>
</div>
</div>
<style>
    tr {
       height: 50px;
    }
    td {
        width:50%;
    }
</style> 
@code {
    private string[] LeafColor = new string[] { "#FAB665" };
    private string FileType { get; set; } = "JPEG";
    private string FileName { get; set; } = "TreeMap";
    SfTreeMap<SmartPhoneData> TreemapRef;
    private string ExportValue { get; set; } = "JPEG";
    public class FileTypeList
    {
        public string Name { get; set; }
    }
    private List<FileTypeList> FileTypes = new List<FileTypeList> {
        new FileTypeList { Name="JPEG" },
        new FileTypeList { Name="PNG" },
        new FileTypeList { Name="SVG" },
        new FileTypeList { Name="PDF" }
    };
    private async Task ExportClick(MouseEventArgs args) {
        ExportType ExportFileType = ExportType.JPEG;
        switch (FileType) {
            case "JPEG":
                ExportFileType = ExportType.JPEG;
                break;
            case "PNG":
                ExportFileType = ExportType.PNG;
                break;
            case "SVG":
                ExportFileType = ExportType.SVG;
                break;
            case "PDF":
                ExportFileType = ExportType.PDF;
                break;
        }
        await TreemapRef.ExportAsync(ExportFileType, FileName);
    }
    private void TreemapValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FileTypeList> args) {
        FileType = args.Value;
    }
    private void NameChange(ChangedEventArgs args) {
        FileName = args.Value;
    }
    public async Task PrintButton() {
        await TreemapRef.PrintAsync();
    }
    public class SmartPhoneData {
        public string Product { get; set; }
        public double Percentage { get; set; }
    }
    public List<SmartPhoneData> LeafDatasource = new List<SmartPhoneData> {
        new SmartPhoneData{ Product="Samsung", Percentage=22 },
        new SmartPhoneData{ Product="Apple", Percentage=11.2 },
        new SmartPhoneData{ Product="Huawei", Percentage=10.5},
        new SmartPhoneData{ Product="Oppo", Percentage=8.4 },
        new SmartPhoneData{ Product="Vivo", Percentage=6.6},
        new SmartPhoneData{ Product="Xiaomi", Percentage=6.3 },
        new SmartPhoneData{ Product="LG", Percentage=3.6 },
        new SmartPhoneData{ Product="ZTE", Percentage=3.3},
        new SmartPhoneData{ Product="Lenovo", Percentage=3.2},
        new SmartPhoneData{ Product="Alcate", Percentage=1.3},
    };
}